<template>
  <div class="container">
    <div class="info-box">
      <van-image
        :src="userInfo.photo"
        alt=""
        width="64px"
        height="64px"
        round
        fit="cover"
      />
      <h2>
        {{ userInfo.name }}
        <br />
        <van-tag color="#fff" text-color="#0098fa">
          {{ userInfo.birthday }}
        </van-tag>
      </h2>
    </div>
    <van-row>
      <van-col span="8">
        <van-icon name="newspaper-o" color="#6fb4ff" />
        <br />
        我的作品
      </van-col>
      <van-col span="8">
        <van-icon name="star-o" color="#ff2c44" />
        <br />
        我的收藏
      </van-col>

      <van-col span="8">
        <van-icon name="todo-list-o" color="#ffca68" />
        <br />
        阅读历史
      </van-col>
    </van-row>
    <van-cell to="edit" icon="edit" is-link title="编辑资料" size="large" />
    <van-cell
      to="student"
      icon="chat-o"
      is-link
      title="小智同学"
      size="large"
    />
    <van-cell icon="setting-o" is-link title="系统设置" size="large" />
    <van-cell
      icon="warning-o"
      is-link
      title="退出登录"
      size="large"
      @click="loginoutClick"
    />
  </div>
</template>

<script>
import { getUserInfo } from './user.js'
import { removetoken } from '@/utils/token.js'
export default {
  name: 'user',
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    getUserInfo()
      .then(res => {
        console.log(res)
        this.userInfo = res.data.data
        // 修改用户信息
        this.$store.commit('updateUserInfo', res.data.data)
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    loginoutClick () {
      this.$dialog
        .confirm({
          title: '友情提示',
          message: '是否确认退出登录？'
        })
        .then(() => {
          // on confirm  确认退出
          // 删除token
          removetoken()
          // 个人信息清除
          this.userInfo = {}
          // 跳转首页
          this.$router.push({ path: '/home' })
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style lang="less">
.container {
  .info-box {
    height: 100px;
    background-color: #0098fa;
    display: flex;
    align-items: center;
    color: #fff;
    .van-image {
      margin: 0 15px;
    }
    h2 {
      font-weight: normal;
      font-size: 16px;
    }
  }
  .van-row {
    padding: 20px 0;
    text-align: center;
    .van-col {
      font-size: 14px;
      .van-icon {
        font-size: 25px;
      }
    }
  }
}
</style>
